<template>
  <div class="demo-collapse">
    <el-collapse accordion>
      <el-collapse-item name="1">
        <template #title
          >&nbsp;&nbsp; 展开查询<el-icon class="header-icon">
            <info-filled />
          </el-icon>
        </template>
        <div>
          <el-row
            :gutter="20"
            style="width: 1000px; margin-top: -30px; margin-left: 20px"
          >
            <el-col :span="6"
              ><div class="grid-content ep-bg-purple" />
              资源编码
              <el-input v-model="form.resourceNo" style="width: 520px" />
            </el-col>
            <el-col :span="6" style="margin-left: 370px"
              ><div class="grid-content ep-bg-purple" />
              资源名称<el-input
                v-model="form.resourceName"
                style="width: 520px"
              />
            </el-col>
          </el-row>

          <el-row
            :gutter="20"
            style="width: 1000px; margin-top: -30px; margin-left: 20px"
          >
            <el-col :span="6"
              ><div class="grid-content ep-bg-purple" />
              资源类别<el-select
                v-model="form.resourceTypeId"
                style="width: 520px"
              >
                <el-option label="请选择" :value="0" />
                <el-option
                  v-for="item in options"
                  :label="item.resourceTypeName"
                  :value="item.resourceTypeId"
                />
              </el-select>
            </el-col>
            <el-col :span="6" style="margin-left: 370px"
              ><div class="grid-content ep-bg-purple" />
              状态<el-select v-model="form.resourceState" style="width: 520px">
                <el-option label="有效" :value="true" />
                <el-option label="无效" :value="false" />
              </el-select>
            </el-col>
            <el-col :span="6" style="margin-left: 1000px"
              ><div class="grid-content ep-bg-purple" />
              <el-button @click="resetForm()">重置</el-button>
              <el-button
                type="primary"
                style="width: 100px"
                @click="GetResourShow()"
                >查询</el-button
              >
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>

  <div style="background-color: white; width: 100%; height: 100%">
    <h3 style="margin: 15px">
      <span style="font-size: 17px; font-weight: 700">资源列表</span>
    </h3>
    <el-button
      type="success"
      style="float: right; margin-top: -40px; margin-right: 20px"
      @click="ResourceAdd()"
      >+新增资源</el-button
    >
    <hr style="background-color: #d3d3d3; height: 1px; border: none" />
    <div style="margin: 20px">
      <el-table
        :data="tableData"
        stripe
        style="width: 2000px"
        border
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column prop="resourceId" label="序号" width="80px" />
        <el-table-column prop="resourceNo" label="资源编码" width="120px" />
        <el-table-column prop="resourceName" label="资源名称" width="100px" />
        <el-table-column
          prop="resourceTypeName"
          label="资源类别"
          width="100px"
        />
        <el-table-column prop="resourceUnit" label="资源单位" width="100px" />
        <el-table-column prop="resourceCost" label="计算成本" width="80px">
          <template #default="scope">
            <el-tag v-if="scope.row.resourceCost == '是'" type="info"
              >是</el-tag
            >
            <el-tag v-else type="info">否</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="expensesName" label="费用类型" />
        <el-table-column prop="resourceCalculation" label="计算方式" />
        <el-table-column prop="handleTime" label="创建时间">
          <template #default="scope">
            {{ scope.row.handleTime.substring(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column prop="handle" label="创建人" width="80px" />
        <el-table-column prop="resourceState" label="状态" width="90px">
          <template #default="scope">
            <el-tag v-if="scope.row.resourceState == 1" type="success"
              >有效</el-tag
            >
            <el-tag v-else type="danger">无效</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="approvalStatus" label="审批状态" width="90px">
          <template #default="scope">
            <el-tag v-if="scope.row.approvalStatus == 0" type="info"
              >未提交</el-tag
            >
            <el-tag v-if="scope.row.approvalStatus == 1" type="primary"
              >已提交</el-tag
            >
            <el-tag v-if="scope.row.approvalStatus == 2" type="success"
              >已审批</el-tag
            >
            <el-tag v-if="scope.row.approvalStatus == 3" type="warning"
              >已驳回</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              @click="ResourceUpdate(scope.row.resourceId)"
              >编辑</el-button
            >
            <el-button
              size="small"
              v-show="
                scope.row.approvalStatus == 0 || scope.row.approvalStatus == 3
              "
              @click="ResourceUpdate(scope.row.resourceId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          layout="prev, pager, next"
          :total="form.totalcount"
          class="mt-4"
          @current-change="handleCurrentChange"
          style="float: right"
        />
        <span style="float: right; margin-top: 4px"
          >共{{ form.totalcount }}条</span
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
import { ElNotification } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'

const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;

const router = useRouter();
const route = useRoute();

//查询
const form = reactive({
  resourceNo: "",
  resourceName: "",
  resourceTypeId: 0,
  resourceState: true,

  pageIndex: 1,
  pageSize: 5,
  totalcount: 0,
  pagecount: 0,
});

const tableData = ref([])
const GetResourShow=()=>{
    axios.post(apiurl+'/api/ShowProduction/GetResourceShow',form).then((res)=>{
        tableData.value = res.data.data.list
        form.totalcount=res.data.data.totalcount
        form.pagecount=res.data.data.pagecount
        console.log(res.data.data.totalcount)
    })
}

//资源类型
const options = ref([])
const GetResourceType=()=>{
    axios.get(apiurl+'/api/ShowProduction/GetResourceTypeShow').then((res)=>{
        options.value = res.data.data
    })
}

//重置
const resetForm = () => {
  form.resourceNo = "";
  form.resourceName = "";
  form.resourceTypeId = 0;
  form.resourceState = true;
  GetResourShow();
};

//新增
const ResourceAdd = () => {
  router.push("/ResourceAdd");
};

// const open2 = () => {
//   ElNotification({
//     title: 'Welcome to Management',
//     message: "欢迎来到资源管理",
//     position: 'bottom-right',
//   })
// }

//分页
const handleCurrentChange = (val: number) => {
  form.pageIndex = val;
  GetResourShow();
};

const ResourceUpdate = (resourceId: any) => {
  router.push({ path: "/ResourceUpdate", query: { resourceId: resourceId } });
};

onMounted(() => {
  GetResourShow();
  GetResourceType();
});
</script>
<style>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
